$box-width:120px;
$box-height:110px;

$item-space : 3px;
$item-width:20px;
$item-height:20px;

$border-active-color:#eee;
.palette-box{
    padding-right: 5px;
}
.palette{
    width: $box-width;
    height: $box-height;

    border-radius: 4px;
    background: rgb(83,83,83);
    text-align: center;

    .p-header{
        ul {
            text-align: center;

            li{
                display: inline-block;
                vertical-align: middle;
                margin: $item-space;
                
                .size-item{
                    width: $item-width;
                    height: $item-height;
                    line-height: $item-height;
                    text-align: center;
                    color: rgb(191, 191, 191);
                    font-size: 18px;
                    font-family: 'Arial';

                    &::after{
                        content: '\2022';
                    }

                    &.s4{
                        // font-size: 24px;
                    }
                    
                    &.s6{
                        font-size: 22px;
                    }

                    &.s8{
                        font-size: 34px;
                    }

                    &.s10{
                        font-size: 44px;
                    }

                    &:hover, &.selected {
                        color: white;
                    }
                }
            }
        }
    }

    .p-gird {
        ul {
            overflow: hidden;
            display: flex;
            flex-flow: wrap;
            justify-content: center;

            li {
                margin: $item-space;
                .color-item{
                    box-sizing: border-box;
                    width: $item-width;        
                    height: $item-height; 
                    background: #eee;
                    border-radius: 2px;

                    &:hover, &.selected {
                        border:1px solid $border-active-color;
                    }

                }
            }
        }
       
    }

}